<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2018/8/9
  Time: 19:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>注册页面</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/demo.css" />
    <link rel="stylesheet" href="../css/templatemo-style.css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../js/modernizr.custom.86080.js"></script>
</head>
<body>
<form action="${pageContext.request.contextPath}/RegServlet.do"
      name="regMgry" method="post" enctype="multipart/form-data">

    <div id="particles-js"></div>

    <ul class="cb-slideshow">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <div class="container-fluid">
        <div class="row cb-slideshow-text-container " id="div1">
            <div class= "tm-content col-xl-6 col-sm-8 col-xs-8 ml-auto section" id="tm-content">
                <div id="regTop">
                    管理员注册
                </div>
                <div id="regInfo">
                    <div id="mgrName">
                        <div class="regInfoLeft">用户名:</div>
                        <div id="" class="regInfoRight">
                            <input type="text" name="mgr_no" id="" class="must" value="" placeholder="请输入合法用户名" />
                        </div>
                    </div>
                    <div id="mgrPwd">
                        <div class="regInfoLeft">密码:</div>
                        <div id="" class="regInfoRight">
                            <input type="password" name="mgr_pwd" id="" class="must" value="" autocomplete="off" placeholder="4-16个字符;区分大小写" />
                        </div>
                    </div>
                    <div id="mgrEmail">
                        <div class="regInfoLeft">邮箱:</div>
                        <div id="" class="regInfoRight">
                            <input type="text" name="mgr_email" id="memail" value="" />
                        </div>
                    </div>
                    <%--手机号--%>
                    <div id="mgrTel">
                        <div class="regInfoLeft">手机号:</div>
                        <div id="" class="regInfoRight">
                            <input type="text" name="mgr_Tel" id="tel" value="" />
                        </div>
                    </div>
                    <%--验证码--%>
                    <div id="mgrYanZheng">
                        <div class="regInfoLeft">验证码:</div>
                        <div id="" class="regInfoRight">
                            <input name="" class="" id="yanZhengMa" type="text" />
                            <input type="hidden" id="hid">
                            <a href="#"><button type="button" onclick="sendMsg()">获取验证码</button></a>
                        </div>
                    </div>
                    <%--真实姓名--%>
                    <div id="mgrName">
                        <div class="regInfoLeft">真实姓名:</div>
                        <div id="" class="regInfoRight">
                            <input type="text" name="mgr_name" id="" value="" />
                        </div>
                    </div>

                    <div id="mgrHead">
                        <div class="regInfoLeft" >上传头像:</div>
                        <div class="regInfoRight">
                            <button  type="button" class="open" id="upda">上传头像</button>&nbsp;&nbsp;&nbsp;&nbsp;
                            <p class="upload_view" id="view" ></p>

                        </div>
                    </div>
                </div>
                <br>

                <div id="fuWu">
                    <input type="checkbox" name="" id="" />
                    <div id="fuWuRight"><p>我同意<a href="#">《服务条例》</a>及<a href="#">《校规声明》</a></p></div>
                </div>
                <div id="regFoot">
                    <button type="button" style="width: 220px;height: 50px;
                    cursor: pointer;background: aqua;border-radius: 5px;border: 0px" onclick="yanzheng()">
                        注册</button>
                </div>
                <div id="regFoot2">
                    已有账号?<a href="../MgrLogin/mgr_login.jsp">直接登录</a>
                </div>
                <!-- 选择图片-->
                <div id="upload_D">
                    <div class="upload_frame">
                        <div class="upload_title">
                            <span class="upload_title_left">请选择图片</span>
                            <span class="upload_title_right"><img src="../img/x.jpg"></span>
                        </div>
                        <div class="upload_fileBtn">
                            图片上传
                            <input type="file" id="file" name="mgr_img"/>
                            <label for="file" style="cursor: pointer;">选择图片</label>
                        </div>
                        <div class="upload_content">
                            <div id="clipArea"></div>
                            <div class="upload_content_right">
                                <p class="upload_view"></p>
                                <button id="clipBtn" type="button" style="cursor: pointer;">保存修改</button>
                                <label for="file" style="cursor: pointer;">重新选图片</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>


</form>
<script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>
<script src="../js/iscroll-zoom.js"></script>
<script src="../js/hammer.js"></script>
<script src="../js/lrz.all.bundle.js"></script>
<script src="../js/jquery.photoClip.min.js"></script>
<script>
    $(function(){
        //document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
        var clipArea = new bjj.PhotoClip("#clipArea", {
            size: [300, 300],// 截取框的宽和高组成的数组。默认值为[260,260]
            outputSize: [300, 300], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
            //outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
            file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
            view: ".upload_view", // 显示截取后图像的容器的选择器或者DOM对象
            ok: "#clipBtn"// 确认截图按钮的选择器或者DOM对象

        });

        $(".upload_title_right").click(function(){
            $("#upload_D").fadeOut();
        });

        $(".open").click(function(){
            $("#upload_D").fadeIn();
        });
    })
    var realYan;

    function sendMsg() {
        var tel=jQuery("#tel").val();


        jQuery.post("${pageContext.request.contextPath}/W_SendMsgServlet",{"tel":tel},function (date) {
            realYan=date.text;
            alert(realYan);
        },"JSON");
    }
    function yanzheng() {
        var f=false;
        var yanZhengMa=jQuery("#yanZhengMa").val();

        if(realYan==yanZhengMa){
            f=true;
        }
        alert(f);
        if(f){
            document.regMgry.submit();
        }else{

        }
    }
</script>

</body>

<script type="text/javascript" src="../js/particles.js"></script>
<script type="text/javascript" src="../js/app.js"></script>

</html>